{% extends 'base.html'%}
{%block title%}问答系统{%endblock%}
{%block content%}
    {% raw %}
    <div class="ui container " v-cloak style="margin-top:20px;" id="app">
        <div class="ui tabular menu animated fadeInLeft" id='tabs'>
            <a class="item active" data-tab="first">最新问答</a>
            <a class="item" data-tab="second">热门问答</a>
            <a class="item " data-tab="third">等待回答</a>
        </div>
        <div class="ui active tab " data-tab='first'>
            <div class="ui divided items">
                <div class="item animated fadeInLeft" v-for='item in q_list'>
                    <div class="ui statistics qa-statistic">
                        <div class="statistic">
                            <div class="value">{{item.vote}}</div>
                            <div class="label">得票</div>
                        </div>
                        <div class="statistic">
                            <div class="value last">{{item.answer}}</div>
                            <div class="label last">回答</div>
                        </div>
                        <div class="statistic">
                            <div class="value">{{item.view}}</div>
                            <div class="label">浏览</div>
                        </div>
                    </div>
                    <div class="content">
                        <div class="meta">
                            <a href='#' class="useranem">{{item.username}}</a>
                            <a href='#' class="date">{{item.date}}</a>
                        </div>
                        <div class="description">
                            <a :href="'/questions/'+item.id" class="title" >ss{{item.title}}
                            </a>
                            <a href='#' class="ui mini label " v-for="label in item.labels">{{label.name}}</a>
                            
                        </div>
                    </div>
                    
                </div>
            </div>
            
        </div>
    </div>
    {% endraw%}

{% endblock%}
{% block script%}
    <script>
        $('.menu .item').tab();
        var app = new Vue({
            el:'#app',
            data:{
                q_list:[
                    {
                        'id':1,
                        'title':'第一个问题',
                        'username': '提问者', 
                        'date': '一个月',
                        'view':10,
                        'vote': 0,
                        'answer':0,
                        'labels':[
                            {'id': 1, 'name':'test'},
                            {'id': 2, 'name':'first'}
                        ]
                    }
                ]
            },
            methods:{
                
            }
        });
        
    </script>
{% endblock%}

